<template>
  <div>
    列表页面
    <div v-for="item in list" :key="item.id" @click="gotoDetail(item.id)">
      {{ item.id }}
    </div>
    <button @click="gotoDetail2">点击query跳转</button>
    <button @click="gotoDetail3">点击params跳转</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ id: 1 }, { id: 2 }, { id: 3 }],
    };
  },
  methods: {
    gotoDetail(id) {
      //this.$router.push("/detail");
      this.$router.push("/detail/" + id);
    },
    gotoDetail2() {
      // this.$router.push({
      //     path:"/detail/5",
      // })
      this.$router.push({
        path: "/detail2",
        query:{
            id:9
        }
      });
    },
    gotoDetail3() {
      // this.$router.push({
      //     path:"/detail/5",
      // })
      this.$router.replace({
        name: "detail",
        params:{
            id:9
        }
      });
    },

  },
};
</script>

<style></style>
